<template>
  <p-modal
    title="人员信息详情"
    :visible="visible"
    :confirm-loading="confirmLoading"
    width="90%"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <p-card :bordered="false" class="detail">
      <div class="detail-btn">

        <p-button style="margin-left: 10px" @click="getWorkpcard" type="primary"> 打印上岗证 </p-button>

        <!-- <p-button style="margin-left: 10px" @click="getPeopleInfo" type="primary">更新</p-button>
        <p-button style="margin-left: 10px" @click="edit" type="primary"> 编辑 </p-button>
        <p-button style="margin-left: 10px" @click="save" type="primary"> 保存 </p-button>
        <p-button style="margin-left: 10px" @click="cancel" type="primary"> 取消 </p-button> -->

      </div>
      <div>
        <div>基础资料</div>

        <p-form-model
          ref="detailForm"
          :model="detailForm"
          :rules="rules"
          v-bind="layout"
        >
          <p-row :gutter="24">
            <p-col :xl="6" :lg="7" :md="8" :sm="24">
              <p-form-model-item
                has-feedback
                label="组织"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="pass"
              >
                <span>{{ detailForm.organization  }}</span>
              </p-form-model-item>
            </p-col>
            <p-col :xl="6" :lg="7" :md="8" :sm="24">
              <p-form-model-item
                has-feedback
                label="员工编号"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="pass"
              >
                <span>{{ detailForm.empno  }}</span>
              </p-form-model-item>
            </p-col>
            <p-col :xl="6" :lg="7" :md="8" :sm="24">
              <p-form-model-item
                has-feedback
                label="员工姓名"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="pass"
              >
                <span>{{ detailForm.empname  }}</span>
              </p-form-model-item>
            </p-col>
            <p-col :xl="6" :lg="7" :md="8" :sm="24">
              <p-form-model-item
                has-feedback
                label="性别"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="pass"
              >
                <span>{{ sexKeys[detailForm.empsex] }}</span>
              </p-form-model-item>
            </p-col>
            <p-col :xl="6" :lg="7" :md="8" :sm="24">
              <p-form-model-item
                has-feedback
                label="出生年月"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="pass"
              >
                <span>{{ getTimeFormat(detailForm.borndt) }}</span>
              </p-form-model-item>
            </p-col>
            <p-col :xl="6" :lg="7" :md="8" :sm="24">
              <p-form-model-item
                has-feedback
                label="在职状态"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="pass"
              >
                <span>{{ holdflgKeys[detailForm.holdflg] }}</span>
              </p-form-model-item>
            </p-col>
            <p-col :xl="6" :lg="7" :md="8" :sm="24">
              <p-form-model-item
                has-feedback
                label="入职日期"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="pass"
              >
                <span>{{ getTimeFormat(detailForm.registerdt) }}</span>
              </p-form-model-item>
            </p-col>
            <p-col :xl="6" :lg="7" :md="8" :sm="24">
              <p-form-model-item
                has-feedback
                label="离职日期"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="pass"
              >
                <span>{{ getTimeFormat(detailForm.dimissidt) }}</span>
              </p-form-model-item>
            </p-col>
            <p-col :xl="6" :lg="7" :md="8" :sm="24">
              <p-form-model-item
                has-feedback
                label="雇佣性质"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="pass"
              >
                <span>{{ employNatureKeys[detailForm.employNature] }}</span>
              </p-form-model-item>
            </p-col>
            <p-col :xl="6" :lg="7" :md="8" :sm="24">
              <p-form-model-item
                has-feedback
                label="状态"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="pass"
              >
                <span>{{ detailForm.status  }}</span>
              </p-form-model-item>
            </p-col>
            <p-col :xl="6" :lg="7" :md="8" :sm="24">
              <p-form-model-item
                has-feedback
                label="电话"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="pass"
              >
                <span>{{ detailForm.telephone  }}</span>
              </p-form-model-item>
            </p-col>
            <p-col :xl="6" :lg="7" :md="8" :sm="24">
              <p-form-model-item
                has-feedback
                label="EMail"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="pass"
              >
                <span>{{ detailForm.email  }}</span>
              </p-form-model-item>
            </p-col>
            <p-col :xl="6" :lg="7" :md="8" :sm="24">
              <p-form-model-item
                has-feedback
                label="学历"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="pass"
              >
                <span>{{  edulevelKeys[detailForm.edulevel] }}</span>
              </p-form-model-item>
            </p-col>
            <p-col :xl="6" :lg="7" :md="8" :sm="24">
              <p-form-model-item
                has-feedback
                label="手机"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="pass"
              >
                <span>{{ detailForm.mobilePhone  }}</span>
              </p-form-model-item>
            </p-col>
            <p-col :xl="6" :lg="7" :md="8" :sm="24">
              <p-form-model-item
                has-feedback
                label="劳务公司"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="pass"
              >
                <span>{{ detailForm.serviceCompany  }}</span>
              </p-form-model-item>
            </p-col>
            <p-col :xl="6" :lg="7" :md="8" :sm="24">
              <p-form-model-item
                has-feedback
                label="线体"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="pass"
              >
                <span v-if="state == 'get'">{{
                  detailForm.dutyDtos[0].linename 
                }}</span>

                <p-select v-else v-model="detailForm.dutyDtos[0].lineid" @change="linenameChange">
                  <p-select-option
                    :value="item.lineid * 1"
                    v-for="(item, index) in classLineInfoList"
                    :key="index"
                  >
                    {{ item.linename  }}
                  </p-select-option>
                </p-select>
              </p-form-model-item>
            </p-col>
            <p-col :xl="6" :lg="7" :md="8" :sm="24">
              <p-form-model-item
                has-feedback
                label="班组"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="pass"
              >
                <span v-if="state == 'get'">{{
                  detailForm.dutyDtos[0].linename 
                }}</span>
                <p-input
                  v-else
                  v-model="detailForm.dutyDtos[0].classname"
                  disabled
                  autocomplete="off"
                />
              </p-form-model-item>
            </p-col>
            <p-col :xl="6" :lg="7" :md="8" :sm="24">
              <p-form-model-item
                has-feedback
                label="车间"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="pass"
              >
                <!-- dutyDtos -->
                <span v-if="state == 'get'">{{
                  detailForm.dutyDtos[0].workroomname 
                }}</span>
                <p-input
                  v-else
                  v-model="detailForm.dutyDtos[0].workroomname"
                  disabled
                  autocomplete="off"
                />
              </p-form-model-item>
            </p-col>
            <p-col :xl="6" :lg="7" :md="8" :sm="24">
              <p-form-model-item
                has-feedback
                label="直接/间接:"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="pass"
              >
                <span v-if="state == 'get'">
                  {{ diPowerKeys[detailForm.diPower]}}
                </span>
                <p-select v-else v-model="detailForm.diPower">
                  <p-select-option
                    v-for="(item, key) in diPowerKeys"
                    :key="key * 1"
                  >
                    {{ item }}
                  </p-select-option>
                </p-select>
              </p-form-model-item>
            </p-col>
            <p-col :xl="6" :lg="7" :md="8" :sm="24">
              <p-form-model-item
                has-feedback
                label="人力分类"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="pass"
              >
                <span v-if="state == 'get'">
                  {{ manpowerClassifyKeys[detailForm.manpowerClassify]}}
                </span>
                <p-select v-else v-model="detailForm.manpowerClassify">
                  <p-select-option
                    :value="key * 1"
                    v-for="(item, key) in manpowerClassifyKeys"
                    :key="key * 1"
                  >
                    {{ item }}
                  </p-select-option>
                </p-select>
              </p-form-model-item>
            </p-col>
            <p-col :xl="6" :lg="7" :md="8" :sm="24">
              <p-form-model-item
                has-feedback
                label="职务"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="pass"
              >
                <span v-if="state == 'get'">
                  {{ dutyKeys[detailForm.dutyDtos[0].duty]  }}
                </span>
                <p-select v-else v-model="detailForm.dutyDtos[0].duty">
                  <p-select-option
                    :value="key * 1"
                    v-for="(item, key) in dutyKeys"
                    :key="key * 1"
                  >
                    {{ item }}
                  </p-select-option>
                </p-select>
              </p-form-model-item>
            </p-col>
          </p-row>
        </p-form-model>
      </div>

      <div>
        <p>相关信息</p>
        <p-tabs default-active-key="1" @change="callback">
          <p-tab-pane key="1" tab="培训记录">
            <PeopleInfoDetailTraningRecord
              :empno="empno"
            ></PeopleInfoDetailTraningRecord>
          </p-tab-pane>
          <p-tab-pane key="2" tab="技能信息" force-render>
            <PeopleInfoDetailSkillInfo
              :empno="empno"
            ></PeopleInfoDetailSkillInfo>
          </p-tab-pane>
          <p-tab-pane key="3" tab="出勤情况">
            <PeopleInfoDetailAttendance
              :empno="empno"
            ></PeopleInfoDetailAttendance>
          </p-tab-pane>
        </p-tabs>
      </div>
    </p-card>
  </p-modal>
</template>

<script type="text/javascript">
import PeopleInfoDetailTraningRecord from "./modules/peopleInfoDetailTraningRecord.vue";
import PeopleInfoDetailSkillInfo from "./modules/peopleInfoDetailSkillInfo.vue";
import PeopleInfoDetailAttendance from "./modules/peopleInfoDetailAttendance.vue";
import { postAction, getAction, deleteAction, putAction } from "@/api/manage";
import { ajaxGetDictItems } from "@/api/api";
import { getDictItemsArr, timestampToDatetime } from "@/utils/util";


export default {
  name: "PeopleInfoDetailModal",
  props: {
    peopleId: String,
    empno: String,
  },
  data() {
    return {
      visible: false,
      state: "get", // 是查看还是编辑状态  查看是get，编辑 edit
      confirmLoading: false,
      labelCol: {
        span: 6,
      },
      wrapperCol: {
        span: 18,
      },
      testId: '',
      detailForm: {
        organization:'',
        empno:'',
        empname:'',
        empsex:'',
        borndt:'',
        holdflg:'',
        registerdt:'',
        dimissidt:'',
        employNature:'',
        status:'',
        telephone:'',
        mobilePhone: '',
        email:'',
        edulevel:'',
        serviceCompany:'',
        dutyDtos: [
          {
            linename: '',
            lineid: '',
            classname: '',
            workroomname: '',
            duty:''
          }
        ],
        diPower: '',
        manpowerClassify:''
      },
      empno: "",
      beforeEditDetailForm: {},
      // 人力分类数字字典
      manpowerClassifyKeys: {},
      // 职务分类数字字典
      dutyKeys: {},
      // 直接/间接数字字典
      diPowerKeys: {},
      // 雇佣性质数字字典
      employNatureKeys: {},
      // 学历数字字典
      edulevelKeys: {},
      // 在职状态数字字典
      holdflgKeys: {},
      // 性别数字字典
      sexKeys: {},
      // 班组信息列表
      classLineInfoList: [],
      url: {
        list: "/mes-manpower/mesHrEmployeeinfo",
        edit: "/mes-manpower/mesHrEmployeeinfo",
        classLineInfoList: "/mes-manpower/mesHrClassLineInfo/classLineInfoList",
        workpcard: "/mes-manpower/mesHrEmployeeinfo/workpcard",  // 上岗证模板
      },
    };
  },

  mounted() {
  },
  methods: {

    getTimeFormat(time){
      return timestampToDatetime(time)
    },

    // 打印上岗证模板
    getWorkpcard(){
      getAction(this.url.workpcard).then( res => {
        if(res.success) {
          window.open(res.data+"&empno="+ this.detailForm.empno)
        }
      } )
    },

    showModal(state = 'get'){
      this.state = state
      this.visible = true
      Object.assign(this.detailForm, this.$options.data().detailForm);
      this.getPeopleInfo();
      this.getAjaxGetDictItems();
      this.getClassLineInfoList();
    },

    handleOk(e) {

      this.confirmLoading = true
      const params = {
        ...this.detailForm.dutyDtos[0],
        diPower: this.detailForm.diPower,
        id: this.peopleId,
      }
      putAction(this.url.edit, params).then( res => {
        if(res.success) {
          // this.state = "get";
          this.visible = false;
          this.$emit('handleSuccess')
        }
        this.confirmLoading = false
      } )

    },
    handleCancel(e) {
      console.log("Clicked cancel button");
      this.visible = false;
    },

    // 获取班组信息列表
    getClassLineInfoList() {
      getAction(this.url.classLineInfoList).then((res) => {
        if (res.success) {
          this.classLineInfoList = [
            ...res.data,
            // ...[
            //   {
            //     "workroomname": "设备车间2",
            //     "workroomno": "E2",
            //     "workroomid": "11032",
            //     "classno": "HX-BC00932",
            //     "classname": "白班2",
            //     "classdescription": null,
            //     "linename": "设备测试1线2",
            //     "lineno": "ET12",
            //     "lineid": "11162",
            //     "status": 1,
            //     "id": 1000212,
            //     "createBy": null,
            //     "createTime": null
            //   }
            // ]
          ];
        }
      });
    },

    // 选择线体
    linenameChange(lineid) {
      console.log(lineid);
      this.classLineInfoList.forEach((ele) => {
        if ((ele.lineid == lineid)) {
          this.detailForm.dutyDtos[0].classname = ele.classname;
          this.detailForm.dutyDtos[0].workroomname = ele.workroomname;
        }
      });
    },

    // 获取数字字典
    getAjaxGetDictItems() {
      const arr = [
        { code: "mes_manpower_classify", key: "manpowerClassifyKeys" },
        { code: "mes_duty", key: "dutyKeys" },
        { code: "mes_di_power", key: "diPowerKeys" },
        { code: "mes_employ_nature", key: "employNatureKeys" },
        { code: "mes_employ_nature", key: "employNatureKeys" },
        { code: "mes_edulevel", key: "edulevelKeys" },
        { code: "mes_holdflg", key: "holdflgKeys" },
        { code: "sex", key: "sexKeys" },
      ];
      getDictItemsArr(this, arr);
    },
    // 获取个人详情
    getPeopleInfo() {
      
      getAction(this.url.list + "/" + this.peopleId).then((res) => {
        if (res.success) {
          console.log(33);
          console.log(this.detailForm);
          if(res.data.dutyDtos.length == 0) {
            delete res.data.dutyDtos
          }
          Object.assign(this.detailForm, res.data)
        }
      });
    },
    // 编辑
    edit() {
      this.state = "edit";
      this.beforeEditDetailForm = JSON.parse(JSON.stringify(this.detailForm));
    },
    // 保存
    save(){
      const params = {
        ...this.detailForm.dutyDtos[0],
        diPower: this.detailForm.diPower,
        id: this.peopleId,
      }
      putAction(this.url.edit, params).then( res => {
        if(res.success) {
          this.state = "get";
        }
      } )
    },
    // 取消
    cancel() {
      this.state = "get";
      this.detailForm = JSON.parse(JSON.stringify(this.beforeEditDetailForm));
    },
  },
  components: {
    PeopleInfoDetailTraningRecord,
    PeopleInfoDetailSkillInfo,
    PeopleInfoDetailAttendance,
  },
};
</script>


<style lang="less" scoped>


</style>
